<template>
  <template v-if="rows > 0">
    <div class="skeleton-paragraph" :class="gapSkeleton ? 'gap-skeleton' : ''">
      <div
        class="skeleton-box"
        :class="full ? 'full' : ''"
        v-for="item in rows"
        :key="item"
      ></div>
    </div>
  </template>
  <template v-else>
    <div class="skeleton-box" :class="gapSkeleton ? 'gap-skeleton' : ''">
      <svg
        class="avatar"
        v-if="avatar"
        viewBox="0 0 1098 1024"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z"
          class="ant-skeleton-image-path"
        ></path>
      </svg>
    </div>
  </template>
</template>

<script setup lang="ts">
import { computed } from "vue";

type Props = {
  active?: boolean;
  width?: string;
  radius?: string;
  height?: string;
  rows?: number;
  gray?: boolean;
  mobile?: boolean;
  round?: boolean;
  avatar?: boolean;
  block?: boolean;
  gapSkeleton?: boolean;
  white?: boolean;
  pc?: boolean;
  circle?: boolean;
  black?: boolean;
  full?: boolean;
  fill?: boolean;
};
const props = withDefaults(defineProps<Props>(), {
  active: true,
  width: "100px",
  height: "100px",
  rows: 0,
  gapSkeleton: false,
});

const width = computed(() => {
  let value: string | number | undefined = undefined;
  if (props.rows || props.block) {
    value = 100 + "%";
  } else if (props.width.includes("%")) {
    value = props.width;
  } else {
    value = (100 / 1920) * parseInt(props.width);
    value = value.toFixed(5) + "vw";
  }
  if (props.fill) {
    value = "100%";
  }
  return value;
});

const height = computed(() => {
  let value: string | number | undefined = undefined;
  if (props.rows) {
    if (props.mobile) {
      value = (100 / 1920) * parseInt(props.height);
    } else {
      value = (30 / 1920) * parseInt(props.height);
    }
    value = value.toFixed(5) + "vw";
  } else if (props.pc) {
    value = (30 / 1920) * parseInt(props.height);
    value = value.toFixed(5) + "vw";
  } else if (props.height.includes("%")) {
    value = props.height;
  } else {
    value = (100 / 1920) * parseInt(props.height);
    value = value.toFixed(5) + "vw";
  }
  if (props.fill) {
    value = "100%";
  }
  return value;
});

const background = computed(() => {
  let color = "";
  if (props.gray) {
    color = "rgba(0,0,0,0.06)";
  }
  if (props.white) {
    color = "rgba(0,0,0,0.15)";
  }
  if (props.black) {
    color = "rgba(0,0,0,0.3)";
  }
  return color;
});

const rowGap = computed(() => {
  let value: string | number | undefined = undefined;
  if (props.mobile) {
    value = (50 / 1920) * 100;
    value = value.toFixed(5) + "vw";
  } else {
    value = (10 / 1920) * 100;
    value = value.toFixed(5) + "vw";
  }
  return value;
});

const radius = computed(() => {
  let value: string | number | undefined = undefined;
  if (props.round) {
    value = "30vw";
  } else if (props.circle) {
    value = "50%";
  } else if (props.radius) {
    if (props.radius.includes("%")) {
      value = props.radius;
    } else {
      value = (100 / 1920) * parseInt(props.radius);
      value = value.toFixed(5) + "vw";
    }
  } else {
    value = "0";
  }
  return value;
});
</script>
<style scoped lang="less">
.skeleton-paragraph {
  display: flex;
  flex-direction: column;
  gap: v-bind(rowGap);
  // padding: 10px;

  .skeleton-box {
    &.full:last-child {
      width: 100% !important;
    }
    &:last-child {
      width: 60% !important;
    }
  }
}

.gap-skeleton {
  margin-bottom: v-bind(rowGap);
}
@keyframes skeleton_loading {
  0% {
    transform: translateX(-37.5%);
  }
  100% {
    transform: translateX(37.5%);
  }
}
.skeleton-box {
  position: relative;
  width: v-bind(width);
  height: v-bind(height);
  overflow: hidden;
  vertical-align: top;
  background-color: v-bind(background);
  border-radius: v-bind(radius);
  display: flex;
  align-items: center;
  justify-content: center;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-end: -150%;
    bottom: 0;
    inset-inline-start: -150%;
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.06) 25%,
      rgba(0, 0, 0, 0.15) 37%,
      rgba(0, 0, 0, 0.06) 63%
    );
    animation-name: skeleton_loading;
    animation-duration: 1.4s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
  }
  .avatar {
    width: 50%;
    height: 50%;
    fill: #bfbfbf;
  }
}
</style>
